import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:intl/intl.dart';
import 'package:oli/generated/l10n.dart';
import 'package:oli/shared/size_fit.dart';
import 'package:oli/shared/theme.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          HomeHeader(),
          HomeBody()
        ],
      ),
    );
  }
}

class HomeHeader extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      padding: EdgeInsets.fromLTRB(setRpx(50), setRpx(48), setRpx(50), setRpx(156)),
      decoration: BoxDecoration(
        color: AppTheme.defaultColors,
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: <Widget>[
          Icon(Icons.cached, size: setRpx(32), color: AppTheme.primaryColors),
          SizedBox(height: setRpx(20),),
          Text(
            S.of(context).welcome("舟山國際經濟技術合作有限公司"),
            style: TextStyle(color: AppTheme.colorff, fontSize: setRpx(36), fontWeight: FontWeight.w700),
          ),
          SizedBox(height: setRpx(95),),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Container(
                child: Row(
                  children: <Widget>[
                    Text(
                      S.of(context).currentOil,
                      style: TextStyle(color: AppTheme.colorff, fontSize: setRpx(24),),
                    ),
                    SizedBox(width: setRpx(10),),
                    Text("1230", style: TextStyle(color: AppTheme.colorf4, fontSize: setRpx(48), fontWeight: FontWeight.w900),),
                  ],
                ),
              ),
              Text(DateTime.now().toString().substring(0, 10), style: TextStyle(color: AppTheme.color99, fontSize: setRpx(24)),)
            ],
          ),
        ],
      ),
    );
  }
}

class HomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      padding: EdgeInsets.fromLTRB(setRpx(20), 0, setRpx(20), 0),
      child: Stack(
        overflow: Overflow.visible,
        children: <Widget>[
          Positioned(
            top: setRpx(-66),
            left: 0,
            right: 0,
            child: Column(
              children: <Widget>[
                OutPrice(),
                SizedBox(height: setRpx(20),),
                OrderStatistics(),
                SizedBox(height: setRpx(20),),
                CreditInfo(),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class OutPrice extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      decoration: BoxDecoration(
        color: AppTheme.colorff,
        borderRadius: BorderRadius.circular(setRpx(10))
      ),
      child: Column(
        children: <Widget>[
          Container(
            height: setRpx(66),
            child: Row(
              children: <Widget>[
                Expanded(
                  flex: 4,
                  child: Container(
                    decoration: BoxDecoration(
                      color: AppTheme.colorff,
                      borderRadius: BorderRadius.only(topLeft: Radius.circular(setRpx(10)))
                    ),
                    child: Center(
                      child: Text(
                        "石油產品出倉價格調整",
                        style: TextStyle(color: AppTheme.primaryColors, fontSize: setRpx(24)),
                      ),
                    ),
                  ),
                ),
                Expanded(
                  flex: 4,
                  child: Container(
                    decoration: BoxDecoration(
                      color: AppTheme.colorf3,
                    ),
                    child: Center(
                      child: Text(
                        "石油氣出倉價格調整",
                        style: TextStyle(fontSize: setRpx(22)),
                      ),
                    ),
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: Container(
                    decoration: BoxDecoration(
                      color: AppTheme.colorf3,
                      borderRadius: BorderRadius.only(topRight: Radius.circular(setRpx(10)))
                    ),
                    child: Center(
                      child: Icon(
                        Icons.help_outline,
                        color: AppTheme.primaryColors,
                      ),
                    )
                  ),
                )
              ],
            ),
          ),
          Container(
            height: setRpx(310),
            child: Swiper(
              itemCount: 2,
              itemBuilder: (BuildContext context, int index) {
                return GridView.builder(
                  shrinkWrap: true,
                  // scrollDirection: Axis.horizontal,
                  padding: EdgeInsets.all(setRpx(30)),
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      mainAxisSpacing: setRpx(20),
                      crossAxisSpacing: setRpx(20),
                      crossAxisCount: 3,
                      childAspectRatio: 1
                  ),
                  itemCount: (3 ~/ (index + 1)).toInt(),
                  itemBuilder: (BuildContext context, int index) {
                    return Container(
                      decoration: BoxDecoration(
                        color: AppTheme.colorf3,
                        borderRadius: BorderRadius.circular(setRpx(20)),
                        boxShadow: [
                          BoxShadow(
                            offset: Offset(0, setRpx(5)),
                            blurRadius: setRpx(10),
                            color: AppTheme.color99
                          )
                        ]
                      ),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: <Widget>[
                          SizedBox(height: setRpx(30),),
                          Icon(Icons.power, size: setRpx(36),),
                          SizedBox(height: setRpx(20),),
                          Text("超級無鉛汽油（1）", style: TextStyle(fontSize: setRpx(22)),),
                          SizedBox(height: setRpx(20),),
                          Text("22.61 HKD/L", style: TextStyle(fontSize: setRpx(22)),),
                          SizedBox(height: setRpx(35),),
                        ],
                      ),
                    );
                  },
                );
              },
              pagination: SwiperPagination(
                builder: DotSwiperPaginationBuilder(
                  space: setRpx(10),
                  size: setRpx(15),
                  activeSize: setRpx(15),
                )
              ),
              scrollDirection: Axis.horizontal,
              autoplay: false,
              loop: false,
            ),
          ),
        ],
      ),
    );
  }
}


class OrderStatistics extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

class CreditInfo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}
